<!--
 * @Author: C.
 * @Date: 2021-08-31 13:11:51
 * @LastEditTime: 2021-09-06 09:50:26
 * @Description: file content
-->
<template>
  <div class="content-wrapper" :style="fieldStyle" @click="setActivated">
    <span v-if="cdata.role == 'label'">{{ cdata.label }}</span>
    <span v-else>[{{ cdata.label }}]</span>
  </div>
</template>
<script lang="ts">
  import { computed, defineComponent, HTMLAttributes } from 'vue';
  import { usePrintStyle } from '../../../../../hooks/usePrintStyle';
  import { FieldInfo } from '../../../../../types';
  export default defineComponent({
    props: {
      cdata: {
        type: Object,
        default: () => {},
      },
      blockName: {
        type: String,
        default: 'body',
      },
    },
    setup(props) {
      let [setPos, setSize, setStyle, setActivated] = usePrintStyle(props.cdata as FieldInfo, {
        blockName: props.blockName,
      });
      let fieldStyle = computed(() => {
        return setStyle(props.cdata.style, 'only-style');
      });
      return {
        setPos,
        setSize,
        fieldStyle: fieldStyle as HTMLAttributes,
        setActivated,
      };
    },
  });
</script>
<style lang="less" scoped>
  @import '../../../../../styles/mixin.less';

  .drag-field {
    z-index: 9;
  }

  .content-wrapper {
    .flexBox();

    background-color: rgb(246, 209, 216);
  }
</style>
